<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<%     
	String path = request.getContextPath();     
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";     
%>  
<head>
	<title>开睿协同工作系统</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<base href="<%=basePath%>"/> 
	<link href="js/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" /> 
	<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
	<script src="js/ligerUI/ligerui.min.js" type="text/javascript"></script> 
	<script type="text/javascript">
		var tab = null;
		var accordion = null;
		var tree = null;

		$(function () {
			//布局
			$("#layout1").ligerLayout({ leftWidth:200, height:'100%', space:4, onHeightChanged:f_heightChanged });

			var height = $(".l-layout-center").height();

			//Tab
			$("#framecenter").ligerTab({ height:height });

			//面板
			$("#accordion1").ligerAccordion({ height:height-24 });

			$(".l-link").hover(function () {
					$(this).addClass("l-link-over");
				}, function () {
					$(this).removeClass("l-link-over");
			});

			tab = $("#framecenter").ligerGetTabManager();
			accordion = $("#accordion1").ligerGetAccordionManager();
			tree = $("#tree1").ligerGetTreeManager();
			$("#pageloading").hide();
			$("#framecenter").ligerTab({onBeforeRemoveTabItem:function(tabid){ 
				var obj = window.frames[tabid];
				if(obj.timework == 'undifined' || typeof obj.timework != 'number') return;
				window.frames[tabid].clearTimeout(obj.timework);
			}});
		});

		function f_heightChanged(options) {
			if (tab)
				tab.addHeight(options.diff);
			if (accordion && options.middleHeight - 24 > 0)
				accordion.setHeight(options.middleHeight - 24);
		}
        
		function f_addTab(tabid, text, url) { 
			tab.addTabItem({ tabid:tabid, text:text, url: url });
		}
	</script>

	<style type="text/css"> 
		body,html{height:100%;}
		body{ padding:0; margin:0; overflow:hidden;} 
		#pageloading{position:absolute; left:0px; top:0px; background:white url('js/ligerUI/images/loading.gif') no-repeat center; width:100%; height:100%;z-index:99999;}
    	.l-topmenu{ margin:0; padding:0; height:31px; line-height:31px; background:url('js/ligerUI/images/top.jpg') repeat-x bottom; position:relative; border-top:1px solid #1D438B;}
		.l-topmenu-logo{ color:#E7E7E7; padding-left:35px; line-height:26px; background:url('js/ligerUI/images/topicon.gif') no-repeat 10px 5px;}
		.l-topmenu-welcome{ position:absolute; height:24px; line-height:24px; right:30px; top:2px;color:#070A0C;}
    	.l-topmenu-welcome a{ color:#E7E7E7; text-decoration:underline} 
		.space{ color:#E7E7E7;}
		.l-link2{text-decoration:underline; color:white; margin-left:2px;margin-right:2px;}
		.l-link{ display:block; line-height:22px; height:22px; padding-left:8px; border:1px solid white; margin:4px; color: #333333;}
    	.l-link-over{ background:#FFEEAC; border:1px solid #DB9F00;} 
	</style>
</head>

<body style="padding:0px;background:#EAEEF5;">
	<div id="pageloading"></div>

	<div id="topmenu" class="l-topmenu">
		<div class="l-topmenu-logo">开睿协同工作系统</div>
    <div class="l-topmenu-welcome">
		<span class="space">你好，${username}！</span>
		<img style="width:15px;height: 15px;" src="image/noti.png"></img><a href="javascript:f_addTab('self','个人通知','notification/list.do')" class="l-link2" style="color:red">个人通知 <c:out value="${unRead}"></c:out></a>
		<a href="javascript:f_addTab('self','个人资料','personal/selfview.do')" class="l-link2">个人资料</a>
		<span class="space">|</span>
		<a href="logout.do" class="l-link2">退出</a> 
    </div> 
	</div>

	<div id="layout1" style="width:99.2%; margin:0 auto; margin-top:4px; "> 
		<div position="left"  title="系统菜单" id="accordion1"> 
            <c:forEach items="${topModules}" var="topModule" varStatus="status">
			<div title="${topModule.alias}" class="l-scroll">
                <c:forEach items="${subModuleMap[topModule.id]}" var="subModule" varStatus="status">
                <a class="l-link" href="javascript:f_addTab('${subModule.id}','${subModule.alias}','${subModule.url}')">${subModule.alias}</a>
                </c:forEach>
			</div>
            </c:forEach>
		</div>
		<div position="center" id="framecenter"> 
			<div tabid="home" title="我的主页" style="height:300px" >
				<iframe frameborder="0" name="home" id="home" src="personal/welcome.do"></iframe>
			</div> 
		</div>
	</div>
	<div style="display:none"></div>
</body>
</html>
